<template>
  <div class="team-home">
    <!-- 顶部标题栏 -->
    <uni-nav-bar title="团队主页" class="nav-bar" status-bar :border="false" />
    <!-- 头部封面区域 -->
    <div
      class="th-header"
      :style="{ backgroundImage: `url(${teamData.coverImage})` }"
    >
      <div class="th-avatar">
        <image :src="teamData.avatar" mode="aspectFit" class="th-avatar-img" />
      </div>
      <span v-if="isDefaultCover" class="tc-tip"> 暂无封面，点击上传 </span>
    </div>
    <!-- 团队基本信息 -->
    <div class="th-info">
      <div class="th-name">
        {{ teamData.name }}
      </div>
      <div class="th-desc">{{ teamData.desc }}</div>
    </div>
    <!-- 查档功能 -->
    <TeamScheduleChecker :teamId="teamId"/>
  </div>
</template>

<script lang="ts" setup>
import TeamScheduleChecker from "./components/TeamScheduleChecker.vue";
import defaultAvatar from "@/static/icons/common/user.svg";
import { getTeamInfo } from  "@/api/hlr-api";
import { showToast } from '@/utils/tools';


const NODEDATA_IMG = "https://ustatic.joymew.com/%20miao/nodata.jpg";

const teamData = ref({
  name: "",
  coverImage: NODEDATA_IMG,
  avatar: defaultAvatar,
  desc: "",
});
const teamId = ref('');


const isDefaultCover = computed(() => {
  return (
    !teamData.value.coverImage || teamData.value.coverImage.includes("nodata")
  );
});

const initTeamData = async (teamId: string) => {
  const response = await getTeamInfo(teamId);
  const { team_name, team_desc, team_icon, team_coveer } = response.data;
  teamData.value = { name:team_name, desc: team_desc, avatar: team_icon || NODEDATA_IMG, coverImage: team_coveer || NODEDATA_IMG };
}

onLoad((options) => {
  if(options && options.teamId) {
    teamId.value = options.teamId;
    initTeamData(options.teamId);
  } else {
    showToast("参数错误!");
  }
})
</script>

<style scoped>
/* 头部封面 */
.th-header {
  position: relative;
  height: 422rpx;
  color: #fff;
  background-size: cover;
  background-position: center;
}

.th-header .th-avatar {
  position: absolute;
  right: 32rpx;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140rpx;
  height: 140rpx;
  background-color: #fff;
  border-radius: 50%;
  transform: translateY(50%);
}

.th-header .th-avatar .th-avatar-img {
  width: 130rpx;
  height: 130rpx;
  border-radius: 50%;
}
.th-header .tc-tip {
  position: absolute;
  bottom: 46rpx;
  left: 50%;
  font-size: 24rpx;
  color: rgba(0, 0, 0, 0.4);
  transform: translateX(-50%);
}
/* 团队基本信息 */
.th-info {
  display: flex;
  flex-direction: column;
  padding: 32rpx;
  background-color: #fff;
}
.th-info .th-name {
  display: flex;
  align-items: flex-end;
  margin-bottom: 16rpx;
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}
.th-info .th-name .th-edit-btn {
  width: 32rpx;
  height: 32rpx;
  margin-left: 8rpx;
  margin-bottom: 5rpx;
}

.th-info .th-desc {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
</style>
